<template>
  <div class="page-container">

    <!-- 路由 start -->
    <router-view class="view" transition="view"></router-view>
    <!-- 路由 end -->

    <!-- 全局用提示框 start -->
    <alert :content="message" :show="showAlert"></alert>
    <!-- 全局用提示框 end -->

    <!-- 移动端调试日志 start -->
    <debug-log v-if="debugLog.show" :logs="debugLog.logs"></debug-log>
    <!-- <debug-log v-if="debug && debugLog.show"></debug-log> -->
    <!-- 调试日志隐藏开关 -->
    <div class="debug-log-on-off" v-ev:hold.prevent="[debugLogOnOff]"></div>
    <!-- 移动端调试日志 end -->

    <!-- loading -->
    <loading v-show="loading.show" transition="scale" :msg="loading.msg"></loading>
  </div>
</template>

<script>
  import FooterNav from '../shared/components/footer-nav.vue'
  import DebugLog from '../shared/components/debug-log.vue'
  import Loading from '../shared/components/loading2.vue'
  import Alert from '../shared/components/alert.vue'
  import store from './store/index'
  import { hideMessage } from './store/actions/system'
  import { globalMixins } from './mixins'

  export default {
    mixins: [globalMixins],

    // 全局用的组件
    components: {
      'alert': Alert,
      'debug-log': DebugLog,
      'loading': Loading,
      'footer-nav': FooterNav
    },

    store,

    vuex: {
      getters: {
        message: ({ system }) => system.message,
        showAlert: ({ system }) => system.showAlert
      },
      actions: {
        hideMessage
      }
    },
    data () {
      return {
      }
    },
    computed: {
      /**
       * 网关离线提示文字
       * @return {[type]} [description]
       */
      gatewayOnlineStateText () {
        var result = {
          '0': '网关已离线，请检查网络并重连',
          '1': '网关已离线，正在重连...',
          '2': '网关在线'
        }
        return result[this.deviceState.gatewayOnlineState]
      }
    },
    ready () {
      this.init()
    },
    methods: {
      init () {
        window.devicesState = {
          online: false
        }
      },
      debugLogOnOff () {
        this.debugLog.show = !this.debugLog.show
      }
    }
  }
</script>

<style lang="stylus">
  @import "../shared/assets/style/base.styl";

  .more
    background url(../shared/assets/images/icons/more.png) no-repeat center /100%
  .more.gray
    background url(../shared/assets/images/icons/graymore.png) no-repeat center /100%
  .page-container
    width 100%
    height 100%
    background no-repeat url('./assets/images/bj.png') fixed center top
    background-size 100% 100%
    position relative
    color #fff
    .view
      width 100%
      height 100%
      overflow hidden
      position relative
  .log-box
    position fixed
    top 0
    left 0
    width 100%
    max-height 5rem
    z-index 9999
    background rgba(0,0,0,0.7)
    overflow auto
    padding-bottom 2rem
    box-sizing border-box
    .log
      font-size 5vw
      color #fff
    .log.even
      color #ccc
  .debug-log-on-off
    width 8vmin
    height 8vmin
    position fixed
    right 0
    bottom 0
    z-index 9999
  .icon
    background-repeat no-repeat
    background-position center center
    background-size 100% 100%
    transition all ease 0.1s
  .no-device
    background-image url('./assets/images/icons/no-device.png')
  .office-room
    background-image url('./assets/images/devices/office-room.png')
  .manager-room
    background-image url('./assets/images/devices/office-room.png')
  .conference-room
    background-image url('./assets/images/devices/office-room.png')
  .conference-room
    background-image url('./assets/images/devices/office-room.png')
  .icon-smoke
    background-image url('./assets/images/icons/icon-smoke.png')
  .icon-fire
    background-image url('./assets/images/icons/icon-fire.png')
  .icon-gas
    background-image url('./assets/images/icons/icon-gas.png')
  .icon_delete_gray
    background-image url('../shared/assets/images/icons/icon_delete_gray.png')
  .danger
    background-image url('./assets/images/icons/danger.png')
  .light-red
    background-image url('./assets/images/icons/light-red.png')
  .light-green
    background-image url('./assets/images/icons/light-green.png')
  .menu-modal-box
    width 100%
    height 100%
    position absolute
    top 0
    left 0
    .mask
      width 100%
      height 100%
      background rgba(0,0,0,0.5)
    .menu-list-box
      width 100%
      height auto
      position absolute
      bottom 0
      left 0
      z-index 100
      /*background #ccc*/
      .menu
        width 100%
        height 1.3rem
        line-height 1.3rem
        text-align center
        border-bottom 1px solid #ccc
        background #fff
        font-size 0.45rem
        &:last-child
          border-bottom 0
          margin-top 0.15rem
  .btn-box
    width 100%
    height auto
    padding 0 0.8rem
    box-sizing border-box
  .btn
    width 100%
    height 1.05rem
    margin 0 auto
    line-height 1.05rem
    color #fff
    border-radius 0.15rem
    background #09b85a
    text-align center
    transition all ease 0.3s
    &.disabled
      opacity 0.5
  input.input-text
    width 100%
    height 1.1rem
    line-height 1.1rem
    padding-left 0.2rem
    box-sizing border-box
    background none
    border 1px solid #d2d2d2
    border-radius 0.15rem

  .touch-mask
    width 100%
    height 100%
    position absolute
    left 0
    top 0

  .device-unlink
    width 100%
    height 1.5rem
    line-height 1.5rem
    background rgba(0,0,0,0.7)
    position absolute
    top 0
    z-index 99
    .unlink
      display inline-block
      margin-top 0.25rem
      margin-left 0.5rem
      width 1rem
      height 1rem
      background red
      position absolute
    .text
      padding-left 1.4rem
      box-sizing border-box
      color #fff
      font-size 0.45rem
    .refresh
      position absolute
      right 0.4rem
      top 0.35rem
      display inline-block
      width 0.8rem
      height 0.8rem
      background url('assets/images/icons/refresh.png') center/100%
      animation rotate 1s infinite linear
      animation-play-state paused // running
    .running
      animation-play-state running

  .c-container
    width 100%
    height auto
    padding 0.3rem 0.8rem 0.8rem
    box-sizing border-box
    .title-box
      width 100%
      height 1rem
      line-height 1rem
      color #838383
      margin-top 0.3rem
    .container-box
      width 100%
      background #fff

  @keyframes rotate {
    0%{ transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
  }
</style>
